import styles from './index.less';
import { useState } from 'react';
import { history, Link, useIntl, useModel } from 'umi';
import { Form, Input, Button, message } from 'antd';
import { setToken } from '@/utils/auth';
import request from '@/utils/request';

const LoginPage = function () {
  const intl = useIntl();
  const hook = useModel('hook');
  
  const [submitLoading, setSubmitLoading] = useState(false);

  const onFinish = (values: any) => {
    setSubmitLoading(true);
    request
      .post('/user/login', values)
      .then((res) => {
        setSubmitLoading(false);
        const { accessToken, id, user, authenticated, qrCode } = res.data;
        setToken(accessToken);
        localStorage.setItem('uid', id);
        localStorage.setItem('userinfo', JSON.stringify(user));
        hook.setUid(id), hook.setUserinfo(user);
        hook.setAuthenticated(authenticated);
        hook.setQrCode(qrCode);

        setTimeout(() => {
          history.replace('/');
        }, 80);
      })
      .catch((err) => {
        setSubmitLoading(false);
        message.error(err.message);
      });
  };

  // const onScanne = () => {
  //   request({
  //     url: '/user/status',
  //     headers: {
  //       'Access-Token': loginResult.accessToken,
  //     },
  //   }).then((res) => {
  //     const { authenticated, qrCode } = res.data;
  //     setQRCode(qrCode);
  //     if (authenticated === 'Y') {
  //       loginComplete();
  //     }
  //   });
  // };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className={styles.loginContainer}>
      <div className={styles.loginTitle}>
        {intl.formatMessage({ id: 'welcomelogin' })}
      </div>
      <Form
        layout="vertical"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        className={styles.loginForm}
      >
        <Form.Item
          label={intl.formatMessage({ id: 'email' })}
          name="email"
          rules={[
            {
              type: 'email',
              message: intl.formatMessage({ id: 'pleaseinputthecorrectemail' }),
            },
            {
              required: true,
              message: intl.formatMessage({ id: 'pleaseinputyouremail' }),
            },
          ]}
        >
          <Input
            placeholder={intl.formatMessage({ id: 'pleaseinputyouremail' })}
          />
        </Form.Item>

        <Form.Item
          label={intl.formatMessage({ id: 'password' })}
          name="password"
          rules={[
            {
              required: true,
              message: intl.formatMessage({ id: 'pleaseinputyourpassword' }),
            },
          ]}
        >
          <Input.Password
            placeholder={intl.formatMessage({ id: 'pleaseinputyourpassword' })}
          />
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            block
            htmlType="submit"
            loading={submitLoading}
          >
            {intl.formatMessage({ id: 'login' })}
          </Button>
          <div className={styles.reg}>
            <Link to="/register">{intl.formatMessage({ id: 'register' })}</Link>
            <Link to="/resetPass">
              {intl.formatMessage({ id: 'forgetpassword' })}
            </Link>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
};
LoginPage.title = '登录';
export default LoginPage;
